export default {
    params: ['vaction', 'title'],
    bind (value) {
        let _startY = 0;
        let display_tag = false;

        const set_transform = (distance) => {
            this.el.style.transform = `translate3d(0, ${-distance}px, 0)`;
        }

        const touchMoveHandle = (e) => {
            let $el = this.el;

            if ($el.offsetHeight + $el.scrollTop >= $el.scrollHeight) {
                const currentY = e.changedTouches[0].pageY;

                if (!display_tag) {
                    let element = document.createElement('p');
                    element.classList.add('bottom-tag');
                    element.innerText = this.params.title;

                    $el.appendChild(element);

                    element.style.marginTop = 'px';

                    if (element.offsetTop < $el.offsetHeight) {
                        element.style.marginTop = `${$el.offsetHeight - element.offsetTop}px`
                    }

                    display_tag = true;
                }
                else {
                    if (_startY > 0 && _startY > currentY) {
                        set_transform((_startY - currentY) * .2);
                        if (_startY - currentY > 200) {
                            this.params.vaction();
                        }
                    } else {
                        _startY = currentY;
                    }
                }
            }
        }

        const touchEndHandle = (e) => {
            if (_startY > 0) {
                this.el.style.transition = '300ms ease-out'
                set_transform(0);
            }
        }

        this.el.addEventListener('touchmove', touchMoveHandle, false);
        this.el.addEventListener('touchend', touchEndHandle, false);
    },
}
